<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>v-text指令</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="root" :x="n">
    <h2 v-text="n"></h2>
    <h2>当前的n值是：{{ n }}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">点位销毁vm</button>

  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  new Vue({
    el: '#root',
    /* template: `
      <div>
        <h2>当前的n值是：{{ n }}</h2>
        <button @click="add">点我n+1</button>
      </div>
    `, */
    data: {
      n: 1
    },
    methods: {
      add() {
        console.log('add')
        this.n++
      },
      bye() {
        console.log('bye')
        this.$destroy()
      }
    },
    watch: {
      n() {
        console.log('n变了')
      }
    },
    beforeCreate() {
      console.log('beforeCreate')
    },
    created() {
      console.log('created')
    },
    beforeMount() {
      console.log('beforeMount')
    },
    mounted() {
      console.log('mounted')
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    },
    beforeDestroy() {
      console.log('beforeDestroy')
    },
    destroyed() {
      console.log('destroyed')
    },
  })
</script>

</html>